<template>
  <div class="container">
    <div class="header">
      <div class="headerLeft">
        <div class="leftImg">
          <img class="imgLeft" src="./images/99999.jpg" alt="">
        </div>
        <div class="leftInfo">
          <p class="infoName">{{name}}</p>
          <p class="infoText">超级用户</p>
        </div>
      </div>
      <div class="headerRight">
        <div class="littleImg"></div>
        <div class="vip">
          <div class="vipImg"></div>
          <span class="pro">Pro会员</span>
          <span class="regVip">立即开通</span>
          <span class="rightLittleImg"></span>
        </div>
      </div>
    </div>
     <!-- 我的资产 -->
     <div class="card">
      <!-- 资产 -->
      <div class="myAsset">我的资产</div>
      <!-- 余额列表 -->
      <div class="money">
        <div class="moneyList">
          <div class="number">
            <span class="mongeyLogo">¥</span>
            <span>0</span>
            <span class="red"></span>
          </div>
          <div class="text">余额</div>
        </div>
        <div class="moneyList">
          <p class="number">0</p>
          <p class="text">红包</p>
        </div>
        <div class="moneyList">
          <p class="number">0</p>
          <p class="text">优惠券</p>
        </div>
        <div class="moneyList">
          <p class="number">0</p>
          <p class="text">积分</p>
        </div>
        <div class="moneyList">
          <p class="number">0</p>
          <p class="text">礼品卡</p>
        </div>
      </div>
    </div>
    <!-- 开卡  -->
    <div class="ka">
      <img class="kaImg" src="https://yanxuan.nosdn.127.net/static-union/1680158533bc5a2f.jpg?type=webp&imageView&thumbnail=800x0&quality=75" alt="">
    </div>
    <!-- 宫格组件 -->
   <div class="grid">
    <van-grid :column-num="3" :gutter="1">
      <van-grid-item icon="orders-o" text="我的订单"></van-grid-item>
        <van-grid-item  icon="user-o" text="账号管理"></van-grid-item>
        <van-grid-item  icon="phone-o" text="我的手机号"></van-grid-item>
        <van-grid-item  icon="calendar-o" text="周六一起拼"></van-grid-item>
        <van-grid-item  icon="after-sale" text="售后服务"></van-grid-item>
        <van-grid-item  icon="gift-card-o" text="邀请返利"></van-grid-item>
        <van-grid-item  icon="bill-o" text="优先购"></van-grid-item>
        <van-grid-item  icon="gold-coin-o" text="积分中心"></van-grid-item>
        <van-grid-item  icon="vip-card-o" text="会员俱乐部"></van-grid-item>
        <van-grid-item  icon="location-o" text="地址管理"></van-grid-item>
        <van-grid-item  icon="shield-o" text="支付安全"></van-grid-item>
        <van-grid-item  icon="service-o" text="帮助与客服"></van-grid-item>
        <van-grid-item  icon="records" text="意见反馈" ></van-grid-item>
        <van-grid-item  icon="goods-collect-o" text="我的竞拍" ></van-grid-item>
    </van-grid>
   </div>
    <van-dialog v-model:logOut="showConfirmDialog" show-cancel-button>
      <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
    </van-dialog>
    <div class="logOut">
      <button class="logOut1" @click="logOut">退出登录</button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Center'
})
</script>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant'
import { useCategoryStore } from '@/stores/modules/center'
import { storeToRefs } from 'pinia'
import pinia from '@/stores'

const router = useRouter()
//初始化仓库
const userInfoStore = useCategoryStore(pinia)


const { name } = storeToRefs(userInfoStore)


// 退出登录
const logOut = () => {
  // 判断是否退出登录
  showConfirmDialog({
    title: '',
    message: '退出登录？'
  })
    .then(() => {
      // 请求退出
      userInfoStore.getLogOut()
      // 跳转到未登录页面
      router.push('/notlogin')
    })
    .catch(() => {})
}
</script>

<style lang="less" scoped>
 .container{
  height: 100%;
  background-color: #f4f4f4;
  .header{
    height: 135px;
    background-image: url(https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png);
    background-size: 100%;
    background-position: bottom;
    padding-left: 0.3rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    .headerLeft {
      width: 66.66%;
      height: 71px;
      display: flex;
      .leftImg {
        width: 71px;
        height: 71px;
        border-radius: 50%;
        .imgLeft {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
      .leftInfo {
        padding-left: 14px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .infoName {
          margin: 0 0 5px;
          font-size: 18px;
        }
        .infoText {
          font-size: 14px;
          color: aqua;
        }
      }
      
    }
    .headerRight {
      width: 33.33%;
      height: 94px;
      position: relative;
      .littleImg {
        width: 25px;
        height: 25px;
        margin: 10px 0 0 80px;
        background-image: url(./images/二维码.png);
        background-size: 100% 100%;
      }
      .vip {
        margin-top: 18px;
        padding: 0 0.2rem 0 0.1rem;
        position: relative;
        white-space: nowrap;

        position: relative;
        animation: mymove shake 1s linear 3;
        -webkit-animation: mymove 1s linear 3;

        @keyframes mymove {
          0% {
            left: 0px;
          }
          50% {
            left: -10px;
          }
          100% {
            left: 0px;
          }
        }

        width: 111px;
        height: 42px;
        border-top-left-radius: 0.64rem;
        border-bottom-left-radius: 0.64rem;
        overflow: hidden;
        background-color: rgb(50, 49, 49);
        .vipImg {
          margin: 7px 0 0 7px;
          border-radius: 50%;
          width: 28px;
          height: 28px;
          background-image: url(./images/vip.jpg);
          background-size: 100% 100%;
        }
        .pro {
          position: absolute;
          left: 42px;
          top: 8px;
          display: block;
          color: #f9e0c0;
          font-size: 12px;
          margin-bottom: 20px;
        }
        .regVip {
          position: absolute;
          left: 42px;
          top: 24px;
          display: block;
          color: #f9e0c0;
          font-size: 12px;
          margin-bottom: 20px;
        }
        .rightLittleImg {
          position: absolute;
          left: 91px;
          top: 25px;
          border-radius: 50%;
          color: aqua;
          display: block;
          width: 12px;
          height: 12px;
          background-image: url(./images/little.jpg);
          background-size: 100% 100%;
        }
      }
    }
  }
  .card {
    background-color: white;
    width: 100%;
    height: 142px;
    margin-bottom: 10px;
    .myAsset {
      margin-left: 0.3rem;
      border-bottom: 1px solid #d9d9d9;
      height: 53px;
      line-height: 53px;
      font-size: 14px;
    }
    .money {
      width: 100%;
      height: 89px;
      display: flex;
      margin-bottom: 10px;
      .moneyList {
        width: 20%;
        height: 42px;
        text-align: center;
        padding-top: 22px;
        .number {
          height: 24px;
          line-height: 24px;
          font-size: 16px;
          font-weight: 999;
          position: relative;
          .mongeyLogo {
            font-size: 12px;
            margin-right: 3px;
          }
          .red {
            width: 7px;
            height: 7px;
            position: absolute;
            border-radius: 50%;
            background-color: #dd1a21;
            top: 3px;
            right: 23px;
          }
        }
        .text {
          height: 18px;
          line-height: 18px;
          font-size: 12px;
        }
      }
    }
  }
  .ka{
    width: 100%;
    height: 70px;
    // padding-bottom: 5px;
    background-color:white;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    .kaImg{
      width: 345px;
      height: 48px;
    }
  }
  .grid {
    margin-bottom: 20px;
  }
  .logOut {
    height: 96px;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 10px;
    .logOut1{
      height: 48px;
      width: 100%;
      line-height: 48px;
      text-align: center;
      font-size: 14px;
      background-color: white;
      border: 1px solid #fff;
    }
  }
 }
 
  
  
  
</style>